﻿// Implementation of a map view using Google Maps
define([
    'Wjs/ui/elements/View'
],
function () {
    'use strict';

    return Wjs.defineOnce({

        type: 'GoogleMap',

        internal: {

            base: Wjs.getType('View'),

            initialize: function () {

                this.markers = [];

                this.setZoom(5);
            }

        },

        setZoom: function (zoom) {

            if (this.map) {

                this.map.setZoom(zoom)
            }
            else {

                this.zoom = zoom;
            }

            return this;
        },

        fitBounds: function (bounds) {

            if (this.map) {

                this.map.fitBounds(bounds);
            }
            else {

                this._fitBounds = bounds;
            }
        },

        setCenter: function (latitude, longitude) {

            if (this.map) {

                this.map.setCenter(new google.maps.LatLng(latitude, longitude));
            }
            else {

                this.center = {
                    latitude: latitude,
                    longitude: longitude
                };
            }

            return this;
        },

        addMarker: function (marker) {

            if (this.map) {

                var m = new google.maps.Marker({
                    map: this.map,
                    position: marker.position == 'center' ? this.map.getCenter() : { lat: marker.position.latitude, lng: marker.position.longitude }
                }),

                infoWindow;

                if (marker.content) {

                    infoWindow = new google.maps.InfoWindow();

                    infoWindow.setContent(marker.content);

                    google.maps.event.addListener(m, 'click', function () {

                        infoWindow.open(this.map, m);
                    });
                }
            }
            else {

                this.markers.push(marker);
            }

            return this;
        },

        centerMap: function (center, callback, scope) {
            var map = this.map,
                pos;

            if (!center) {

                if (navigator.geolocation) {

                    navigator.geolocation.getCurrentPosition(function (position) {

                        pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                        map.setCenter(pos);

                        callback.call(scope);

                    }, function () {

                        Wjs.alert()

                           .setTitle('Error')

                           .setContent('The Geolocation service failed.')

                           .show();
                    });

                }
                else {

                    Wjs.alert()

                        .setTitle('Error')

                        .setContent('Your browser doesn\'t support geolocation.')

                        .show();

                }
            }
            else {

                pos = new google.maps.LatLng(center.lat(), center.lng());

                map.setCenter(pos);

                callback.call(scope);
            }

        },

        renderHandler: function () {

            var mapOptions = {
                zoom: this.zoom
            };

            try {

                this.map = new google.maps.Map(this.domEl, mapOptions);
            }
            catch (error) { // Generally happens when there is no internet connection

                console.log(error);

                Wjs.alert()
                    .setTitle('Unable to load Google map')
                    .setContent('Verify you have internet connection')
                    .show();
            }

            this.centerMap(this.center, function () {

                if (this.markers) {

                    this.markers.forEach(function (cfg) {
                        var marker = new google.maps.Marker({
                            map: this.map,
                            position: cfg.position == 'center' ? this.map.getCenter() : { lat: cfg.position.latitude, lng: cfg.position.longitude }
                        }),

                        infoWindow;

                        if (cfg.content) {

                            infoWindow = new google.maps.InfoWindow();

                            infoWindow.setContent(cfg.content);

                            google.maps.event.addListener(marker, 'click', function () {

                                infoWindow.open(this.map, marker);
                            });
                        }
                    },
                    this);
                }
            },
            this);

        },

        refresh: function () {

            google.maps.event.trigger(this.map, 'resize');
        },

        reset: function () {

        }

        // Do not destroy the map, try to reuse it
        //destroy: function () {

        //    delete this.map;
        //}

    });

});
